
<include file="mobile/Public/header" />

<link rel="stylesheet" href="__CSS__/swiper/swiper.min.css">
<link rel="stylesheet" href="__CSS__/swiper.css">
<link rel="stylesheet" href="__CSS__/detail.css">
<link rel="stylesheet" href="__CSS__/count_box.css">
<header class="color-main vertical-box">
    <span class="header-title">宝贝详情</span>
    <div class="header-left vertical-box">
        <img class="img-btn" src="__IMG__/back.png" onclick="history.back()">
    </div>
    <div class="header-right vertical-box">
        <img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
    </div>
</header>
<nav>
    <div class="nav-swiper-container">
        <div class="swiper-wrapper">
            <php>
            if(!empty($product['images'])){
	            $product['images'] = explode(',',$product['images']);
                foreach($product['images'] as $img){
                    </php>
                    <div class="swiper-slide"><img class="slide-img detail-nav-scale" src="<php> echo pic($img) </php>"></div>
            <php>
                }
            }
            else{
                </php>
                <div class="swiper-slide"><img class="slide-img detail-nav-scale" src="<php> echo pic($product['main_img']) </php>"></div>
            <php>
            }
            </php>
        </div>
        <div class="swiper-count-box">
            <span class="active-index-num">1</span> / <span class="all-index-num">1</span>
        </div>
    </div>
    <div class="section-pic-tips-group">
        <php>
        $count = 0;
        $status = explode(',',$product['info']);
        array_walk($status,
        function ($a)
        {
        switch($a){
        case 6:
        echo '<p class="section-pic-tips" style="background: #fc7539;">热销</p>';
        break;
        case 7:
        echo '<p class="section-pic-tips" style="background: #7fbf23;">推荐</p>';
        break;
        }
        });
        </php>
    </div>
</nav>
<article class="detail-margin">
    <div class="detail-box">
        <section class="title-section text-section big-text"><php> echo $product['title'] </php></section>
        <section class="price-section text-section">
            <span class="secondary-font big-text">￥<php> echo sprintf("%.2f", $product['price']/100) </php></span>
            <php>
            if(!empty($product['ori_price']) && $product['ori_price']>$product['price']){
                </php>
                <span class="white-tips-font small-text" style="text-decoration: line-through">￥<php> echo sprintf("%.2f", $product['ori_price']/100) </php></span>
            <php>
            }
            </php>
        </section>
        <php>
        /*有规格，在规格里选择数量*/
        if(!empty($product['sku_table'])){
            </php>
            <section class="sku-section linear-section vertical-box linear-noinput">
                <span class="linear-title vertical-box">选择规格（请选择）</span>
                <span class="linear-right vertical-box"><span>
                    <img class="sku-icon" src="__IMG__/go.png">
                </span></span>
            </section>
            <div style="display: none" class="sku-content last-liner-section">
                <php>
                foreach($product['sku_table']['table'] as $in => $table){
                    </php>
                    <p class="sku-p" data-sku="<php> echo $in </php>">
                        <php>
                        foreach($table as $t){
                            </php>
                            <button class="normal-text tips-font"><php> echo $t </php></button>
                        <php>
                        }
                        </php>
                    </p>
                <php>
                }
                </php>
                <p class="show-quantity small-text"></p>
                <div class="count-content"><div class="sku-type count-box clearfix">
                        <button class="count-btn cut-btn big-text border-box">-</button>
                        <input class="count-input border-box" type="text" value="1" readonly>
                        <button class="count-btn add-btn big-text border-box">+</button>
                    </div></div>
            </div>
        <php>
        }
        /*没有的单独选择*/
        else{
            </php>
            <section class="linear-section vertical-box linear-noinput">
                <span class="linear-title vertical-box">购买数量（剩余库存：<php> echo(!empty($product['quantity']))?$product['quantity']:"0"</php>）</span>
                <span class="linear-right vertical-box">
                    <span>
                        <span class="section-type sku-type count-box clearfix">
                            <button class="count-btn cut-btn big-text border-box">-</button>
                            <input class="count-input border-box" type="text" value="1" readonly>
                            <button class="count-btn add-btn big-text border-box">+</button>
                        </span>
                    </span>
                </span>
            </section>
        <php>
        }
        </php>

        <php>
        if(!empty($product['extra_info'])){
            </php>
            <section class="info-section linear-section vertical-box linear-noinput">
                <span class="linear-title vertical-box">产品参数</span>
            <span class="linear-right vertical-box">
                <span>
                    <img class="info-icon" src="__IMG__/go.png">
                </span>
            </span>
            </section>
            <div class="info-content last-liner-section" style="display: none;">
                <php>
                foreach($product['extra_info'] as $info){
                    </php>
                    <p>
                        <span class="info-ukey"><php> echo $info['ukey'] </php></span>：
                        <span class="info-data"><php> echo $info['data'] </php></span>
                    </p>
                <php>
                }
                </php>
            </div>
        <php>
        }
        </php>

	     <section class="linear-section last-liner-section vertical-box linear-noinput" <php>
		    if($product['comment_cnt']!='0') echo 'onclick="window.location.href=\''.U('shop/index/commentlist').'&product_id='.$product['id'].'\'"'; </php> >
            <span class="linear-title vertical-box">宝贝评价（<php> echo $product['comment_cnt'] </php>）</span>
            <span class="linear-right vertical-box"><span>
                <span class="tips-font">全部</span><img src="__IMG__/go.png">
            </span></span>
        </section>
        <section class="detail-section ">
            <div class="html-box">
                <php> echo $product['content'] </php>
            </div>
        </section>
        <div class="bottom-btn vertical-box"><img src="__IMG__/bottom.png"></div>
    </div>
</article>
<footer class="detail-footer">
    <div class="detail-footer-box vertical-box">
        <span class="circle-btn vertical-box" onclick="window.location.href='{:U('shop/index/cart')}'"><img src="__IMG__/cart.png"></span>
        <php>
        if($product['quantity']==0){
            </php>
            <button class="color-disable">已经卖光啦</button>
        <php>
        }
        else{
            </php>
            <button class="addCartNow sku-data color-warning footer-button-first">加入购物车</button>
            <button class="buyImmediately sku-data color-secondary">立即购买</button>
        <php>
        }
        </php>

    </div>
</footer>
<div class="detail-shadow"></div>

<include file="mobile/Public/footer" />


<script>
    var product_id = <php> echo(!empty($product['id'])? json_encode($product['id']):"null")</php>;//useful
    var product_sku = <php> echo(!empty($product['sku_table'])? json_encode($product['sku_table']):"null")</php>;//useful
    var make_order_url = '{:U('shop/index/makeorder')}';
    //'jquery' or 'zepto' 脚本入口,按情况选择加载
    seajs.use('jquery', function () {
        /*todo:在网络不好的时候，js会等待图片加载完？才执行！？把ready去除就没事了，why？*/
        /*$(document).ready(function () {*/
            /*轮播页*/
            seajs.use('seajs/swiper');
            /*详情*//*sku*/
            //seajs.use(['seajs/detail_scroll','seajs/sku_select'], function (scroll,sku) {
            seajs.use(['','seajs/sku_select'], function (scroll,sku) {/*不滚动版本*/
                /*
                    下订单
                */
                $('.buyImmediately').click(function () {
                    /*数量*/
                    var quantity = $('.count-input').val();
                    quantity = (isNaN(quantity))?1:quantity;
                    /*规格*/
                    if(product_sku){
                        var sku_index = $(this).data('sku');
                        if(sku_index){
                            console.log('sku-ready',sku_index);

                            window.location.href=make_order_url+'&id='+product_id+'&quantity='+quantity+'&sku='+sku_index;
                        }
                        else {
                            if(scroll){ /*有滚动效果的时候*/
                                var status = scroll.getStatus();
                                if(status.down){
                                    scroll.functionDown();
                                    sku.in();
                                }
                                if(status.up){
                                    sku.in();
                                }
                            }
                            else{       /*不要滚动的时候*/
                                sku.in();
                            }
                        }
                    }
                    else window.location.href=make_order_url+'&id='+product_id+'&quantity='+quantity;
                });

                $('.addCartNow').click(function () {
                    /*数量*/
                    var quantity = $('.count-input').val();
                    quantity = (isNaN(quantity))?1:quantity;
                    var sku_uid = product_id;
                    /*规格*/
                    if(product_sku){
                        var sku_index = $(this).data('sku');
                        if(sku_index){
                            sku_uid += ';'+sku_index;
                        }
                        else {
                            if(scroll){
                                var status = scroll.getStatus();
                                if(status.down){
                                    scroll.functionDown();
                                    sku.in();
                                }
                                if(status.up){
                                    sku.in();
                                }
                            }
                            else{
                                sku.in();
                            }
                            return;//！！！！
                        }
                    }
                    console.log("?",sku_uid,quantity);
                    var data = {
                        sku_id:sku_uid,
		                        quantity:quantity
                    };
                    $.post('{:U('shop/index/add_to_cart')}',data, function (ret) {
		                console.log(ret);
//                        ret = $.parseJSON(ret);
		                console.log(ret.status);
                        if(ret.status==1){
                            showTip('','加入购物车成功','');
                        }
                        else{
                            showTip('','加入失败，'+ret.info,'');
                        }
                    })
                });

                /*
                    点击规格section
                */
                $('.sku-section').click(function () {
                    var status = $(this).data('status');
                    if(status=='in')    sku.out();
                    else                sku.in();
                });
                /*
                    sku-butotn-规格按钮点击;
                    成功收集sku后往：.sku-data注入数据
                */
                $('.sku-p').children('button').click(function () {
                    $(this).addClass('active-border').addClass('active-font').addClass('selected-sku')
                        .siblings().removeClass('active-border').removeClass('active-font').removeClass('selected-sku');
                    var sku_p = $('.sku-p');
                    var all_sku = sku_p.length;
                    var now_sku = $('.selected-sku').length;
                    if(all_sku==now_sku){
                        var sku_index = '';
                        sku_p.each(function () {
                            var index = $(this).data('sku');
                            var value = $(this).children('.selected-sku').text();
                            sku_index+=';'+index+':'+value
                        });
                        sku_index = sku_index.substr(1);

                        /*
                            获取到sku名字后的操作
                            todo:可以把这里写成一个func，如果到时候要cookie记录规格，用product_sku['info'][sku_index]作为参数来初始化
                        */
                        console.log(product_sku['info'][sku_index]);
                        if(product_sku['info'][sku_index]){
                            $('.price-section').children('.big-text').text('￥'+(product_sku['info'][sku_index]['price']/100).toFixed(2));
                            $('.sku-section').children('.linear-title').html('选择规格（'+sku_index+'）');
                            $('.show-quantity').text('剩余库存（'+product_sku['info'][sku_index]['quantity']+'）');
                            if(product_sku['info'][sku_index]['quantity']==0){

                            }
                        }
                        $('.sku-data').data('sku',sku_index)
                    }
                });
            });
            /*商品数目*/
            seajs.use('seajs/count_box', function (count) {
                //console.log(count);
                $('.count-box .add-btn').click(function () {
                    var box = $(this).parents('.count-box');
                    count.add(box)
                });
                $('.count-box .cut-btn').click(function () {
                    var box = $(this).parents('.count-box');
                    count.cut(box)
                });
            });


            seajs.use('transit', function () {
                $('.info-section').click(function () {
                    var section = $(this);
                    var status = section.data('status');
                    if(status=='in'){
                        section.data('status','out').find('.info-icon').transition({rotate:'0deg'});
                        $('.sku-section').show();
                        section.nextAll('section').show();
                        $('.info-content').hide();
                    }
                    else{
                        section.data('status','in').find('.info-icon').transition({rotate:'90deg'});
                        $('.sku-section').hide();
                        section.nextAll('section').hide();
                        $('.info-content').show();
                    }

                })
            });

            seajs.use('jquery_cookie', function () {
                $.cookie('coupon_uid',null)
            });

        /*})*/
    });

</script>
</body>
</html>